# Custom Theme

`react-tweet` exports multiple [utility functions](/api-reference) to help you build your own theme if the default [Twitter theme](/twitter-theme) and its customization options don't work for you or if you simply want to build your own.

To get started, we recommend using the [source for the Twitter theme](https://github.com/vercel/react-tweet/blob/main/packages/react-tweet/src/tweet.tsx) as the base and start customizing from there. Which more precisely is all of the components in the [`react-tweet` package](https://github.com/vercel/react-tweet/blob/main/packages/react-tweet):

- [`src/tweet.tsx`](https://github.com/vercel/react-tweet/blob/main/packages/react-tweet/src/tweet.tsx): Exports the async `Tweet` component that fetches the tweet data and renders the tweet. This is a [React Server Component](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components).
- [`src/twitter-theme/*.tsx`](https://github.com/vercel/react-tweet/blob/main/packages/react-tweet/src/twitter-theme): All the components that make up the theme.
- [`src/swr.tsx`](https://github.com/vercel/react-tweet/blob/main/packages/react-tweet/src/swr.tsx): Exports the `Tweet` component but it uses [SWR](https://swr.vercel.app/) to fetch the tweet client-side. This is useful if React Server Components are not supported by your React environment.

You can see a custom theme in action by looking at our [custom-tweet-dub](https://github.com/vercel/react-tweet/blob/main/apps/custom-tweet-dub) example.

## Publishing your theme

We recommend you follow the same patterns of the Twitter theme before publishing your theme:

- Use the props defined by the `TweetProps` type in your Tweet component.
- Support the CSS theme features shown in [Toggling theme manually](/#toggling-theme-manually). You can use the [`base.css`](https://github.com/vercel/react-tweet/blob/main/packages/react-tweet/src/twitter-theme/theme.css) file from the Twitter theme as reference.
- Support both SWR and React Server Components as explained below.

When you use `react-tweet` we tell the builder which `Tweet` component to use with `exports` in `package.json`:

```json filename="package.json" copy
"exports": {
  ".": {
    "react-server": "./dist/index.js",
    "default": "./dist/index.client.js"
  }
},
```

> You can learn more about `react-server` in the [RFC for React Server Module Conventions V2](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports).

If the builder supports React Server Components, it will use the `react-server` export. Otherwise, it will use the `default` export.

Each export goes to a different file that exports the `Tweet` component. In this case `index.ts` exports a React Server Component and `index.client.ts` exports the `Tweet` component that uses SWR:

```tsx filename="index.ts" {2} copy
export * from './twitter-theme/components.js'
export * from './tweet.js'
export * from './utils.js'
export * from './hooks.js'
```

```tsx filename="index.client.ts" {2} copy
export * from './twitter-theme/components.js'
export * from './swr.js'
export * from './utils.js'
export * from './hooks.js'
```
